<section>
    <div class="modal-header">
        <h3 class="modal-title" ng-show="operation === 'ADD'"><small>Create group:</small> {{group.groupName}}</h3>
        <h3 class="modal-title" ng-show="operation === 'EDIT'"><small>Edit group:</small> {{group.groupName}}</h3>
    </div>
    <div class="modal-body">
        <form name="groupForm" class="form-horizontal" role="form">
            <div ng-hide="!authEnabled.headers || isAuthorized" class="form-group {{groupForm.rootPassword.$valid ? '' : 'has-error'}}">
                <label for="rootPassword" class="col-md-3 control-label">Root password</label>
                <div class="col-md-9">
                    <input class="form-control" type="password" ng-required="!isAuthorized && authEnabled.headers" id="rootPassword" name="rootPassword" placeholder="root password" ng-model="rootPassword"/>
                </div>
            </div>
            <div class="form-group {{groupForm.groupName.$valid ? '' : 'has-error'}}">
                <label for="groupName" class="col-md-3 control-label">Name</label>
                <div class="col-md-9">
                    <input class="form-control" id="groupName" required name="groupName" placeholder="group name"
                           ng-model="group.groupName" ng-disabled="operation === 'EDIT'" ng-pattern="/^[a-zA-Z0-9.-]+$/"/>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-disabled="groupForm.$invalid" ng-click="save()">Save</button>
        <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
    </div>
</section>
